<template>
  <div>
    <!-- 商品列表页 -->

    <!-- 导航栏
    参数：
    click-left	点击左侧按钮时触发
     -->
    <van-nav-bar
      class="bac"
      title="商品列表"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 商品列表   有商品时显示-->
    <van-list v-if="goodsList.length > 0">
      <van-card
        v-for="item in goodsList"
        :key="item.id"
        :price="item.price.toFixed(2)"
        desc="描述信息"
        :title="item.goodsname"
        :thumb="
          item.img
            ? $imgUrl + item.img
            : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
        "
        @click="goDetail(item.id)"
      />
    </van-list>
    <!--Empty 空状态 无商品列表  无商品时显示 -->
    <van-list v-else><van-empty description="假装有商品。。。"/></van-list>
  </div>
</template>

<script>
//引入接口
import { getGoods } from "../util/axios";
export default {
  data() {
    return {
      goodsList: []
    };
  },
  mounted() {
    getGoods({
      //获取地址栏信息
      fid: this.$route.query.id
    }).then(res => {
      //   console.log(res, "商品列表响应的数据");
      if (res.code == 200) {
        // 后端返回的是null,需对数据为空时进行处理，转换数据类型为数组格式
        this.goodsList = res.list ? res.list : [];
      }
    });
  },
  methods: {
    //封装一个跳转详情页的事件
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style lang="" scoped>
.bac {
  background: #ff6040;
}
</style>
